<!--  -->
<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
      >
        <el-menu-item index="1" @click="changeIndex('1')"
          >全部歌单</el-menu-item
        >
        <el-menu-item index="2" @click="changeIndex('2')">专辑</el-menu-item>
        <el-menu-item index="3" @click="changeIndex('3')">艺人</el-menu-item>
        <el-menu-item index="4" @click="changeIndex('4')">mv</el-menu-item>
        <el-menu-item index="5" @click="changeIndex('5')">云盘</el-menu-item>
      </el-menu>
    </el-header>
    <AllList v-show="activeIndex === '1'"></AllList>
    <Albums v-show="activeIndex === '2'"></Albums>
    <Singer v-show="activeIndex === '3'"></Singer>
    <MvCollect v-show="activeIndex === '4'"></MvCollect>
    <MyCloud  v-show="activeIndex === '5'"></MyCloud>
  </el-container>
</template>

<script>
import AllList from "@/components/libaray/userCollect/AllList";
import Albums from "@/components/libaray/userCollect/Albums";
import Singer from "@/components/libaray/userCollect/Singer";
import MvCollect from "@/components/libaray/userCollect/MvCollect";
import MyCloud from "@/components/libaray/userCollect/MyCloud";
export default {
  name: "MenyTab",
  components: {
    AllList,
    Albums,
    Singer,
    MvCollect,
    MyCloud,
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  created() {},
  methods: {
    changeIndex(index) {
      this.activeIndex = index;
    },
  },
};
</script>
<style lang='less' scoped>
.el-header {
  margin-top: 20px;
  width: 100%;
  padding: 0;
  .el-menu-demo {
    // width: 100%;
    border-radius: 5px;
    border-bottom: none;
    width: 460px;
    display: flex;
    justify-content: space-evenly;
    /deep/.el-menu-item {
      flex: 1;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0px 8px;
      border-bottom: none;
      border-radius: 5px;
      color: rgb(109, 100, 100);
      font-size: 17px;
      font-weight: 600;
      margin-right: 5px;
    }
    /deep/.el-menu-item:hover {
      background-color: #f6f6f8;
    }
    /deep/.el-menu-item:focus,
    /deep/.el-menu-item.is-active {
      color: #333;
      border-bottom: none;
      background-color: #f6f6f8;
    }
  }
}
.el-main {
  padding: 0;
}
</style>